<template>
  <div>
    <div class="header">
      <h2>产品列表页面</h2>
      <div class="search">
        产品名称：<input
          type="text"
          placeholder="请输入搜索关键字"
          v-model.trim="searchtxt"
          @input="searchFn"
        />
        <span class="span1" @click="add">新增</span>
        <span class="span1" @click="retdel">批量删除</span>
      </div>
    </div>

    <table>
      <tr>
        <input type="checkbox" v-model="checkAll" />
        <th v-for="(item, index) in title" :key="index">{{ item }}</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="index" v-show="item.isShow">
        <input type="checkbox" v-model="item.isCheck" @click="saveValue(index)" />
        <td>{{ item.pname }}</td>
        <td :disabled="item.id == 1">{{ item.id }}</td>
        <td>{{ timer }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
        <td>{{ item.user }}</td>
        <td>
          <span>编辑</span>
          |
          <span @click="delet(index)">删除</span>
        </td>
      </tr>
      <tr>
        <td colspan="9">
          合计：{{ this.arr.length }}类产品，总价：{{ total }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      searchtxt: "",
      num: 1,
    };
  },
  methods: {
    ...mapMutations(["del"]),
    add() {
      this.$router.push("/home/add");
    },
    delet(i) {
      this.del(i);
    },
    retdel(){

    },
    saveValue(){
      
    },
    searchFn() {
      this.arr.forEach((item) => {
        item.isShow = item.pname.indexOf(this.searchtxt) == -1 ? false : true;
      });
    },
  },
  computed: {
    ...mapState(["title", "arr"]),
    ...mapGetters(["timer"]),
    total() {
      let sum = this.arr.reduce((pre, cur) => {
        return (cur.isCheck ? cur.price * cur.count : 0) + pre;
      }, 0);
      return sum;
    },
    checkAll: {
      get() {
        let flag = true;
        for (let i = 0; i < this.arr.length; i++) {
          if (this.arr[i].isCheck == false) {
            flag = false;
          }
        }
        return flag;
      },
      set(val) {
        this.arr.forEach((item) => (item.isCheck = val));
      },
    },
  },
};
</script>

<style lang = "less" scoped>
.header {
  h2 {
    font-weight: bold;
    width: 100vw;
    font-size: 20px;
    padding: 19px 0 12px 30px;
    border-bottom: 1px solid #000;
  }
  .search {
    display: flex;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin: 10px 0 10px 15px;
    input {
      width: 230px;
      height: 30px;
      text-indent: 10px;
      border: 1px solid rgb(163, 217, 239);
      outline-color: rgb(163, 217, 239);
    }
    .span1 {
      padding: 0 10px;
      color: #fff;
      height: 34px;
      line-height: 34px;
      margin: 0 5px;
      background-color: rgb(134, 205, 234);
    }
  }
}
table {
  margin: 5px 12px;
  width: 1320px;
  text-align: center;
}
table,
td,
th,
tr {
  border: 1px solid #000;
}
td,
th {
  padding: 5px 20px;
}
</style>